﻿<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Art.ascx.cs" Inherits="Controls_Art" %>
<script type="text/javascript" src="../Scripts/jquery.galleriffic.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function ($) {
        // We only want these styles applied when javascript is enabled
        $('div.navigation').css({ 'width': '294px', 'float': 'right' });
        $('div.content').css('display', 'block');

        // Initially set opacity on thumbs and add
        // additional styling for hover effect on thumbs
        var onMouseOutOpacity = 0.67;
        $('#thumbs ul.thumbs li').opacityrollover({
            mouseOutOpacity: onMouseOutOpacity,
            mouseOverOpacity: 1.0,
            fadeSpeed: 'fast',
            exemptionSelector: '.selected'
        });

        // Initialize Advanced Galleriffic Gallery
        var gallery = $('#thumbs').galleriffic({
            delay: 2500,
            numThumbs: 12,
            preloadAhead: 10,
            enableTopPager: true,
            enableBottomPager: true,
            maxPagesToShow: 7,
            imageContainerSel: '#slideshow',
            controlsContainerSel: '#controls',
            captionContainerSel: '#caption',
            loadingContainerSel: '#loading',
            renderSSControls: true,
            renderNavControls: true,
            playLinkText: 'Play Slideshow',
            pauseLinkText: 'Pause Slideshow',
            prevLinkText: '&lsaquo; Previous Photo',
            nextLinkText: 'Next Photo &rsaquo;',
            nextPageLinkText: 'Next &rsaquo;',
            prevPageLinkText: '&lsaquo; Prev',
            enableHistory: false,
            autoStart: false,
            syncTransitions: true,
            defaultTransitionDuration: 900,
            onSlideChange: function (prevIndex, nextIndex) {
                // 'this' refers to the gallery, which is an extension of $('#thumbs')
                this.find('ul.thumbs').children()
							.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
							.eq(nextIndex).fadeTo('fast', 1.0);
            },
            onPageTransitionOut: function (callback) {
                this.fadeTo('fast', 0.0, callback);
            },
            onPageTransitionIn: function () {
                this.fadeTo('fast', 1.0);
            }
        });
    });
</script>
<div id="container">
    <div id="gallery" class="content">
        <div id="controls" class="controls">
        </div>
        <div class="slideshow-container">
            <div id="loading" class="loader">
            </div>
            <div id="slideshow" class="slideshow">
            </div>
        </div>
    </div>
    <div id="thumbs" class="navigation">
        <ul class="thumbs noscript">
            <asp:Repeater ID="rptData" runat="server">
                <ItemTemplate>
                    <li><a class="thumb" name="leaf" href='../Upload/Thumps/<%#Eval("THUMB_IMG") %>'
                        title="Title #0">
                        <img src='../Upload/Thumps/<%#Eval("THUMB_IMG") %>' alt="Title #0" />
                    </a>
                        <div class="caption">
                            <div class="download">
                                <a href='../Upload/Thumps/<%#Eval("THUMB_IMG") %>'>Download Original</a>
                            </div>
                            <div class="image-title">
                                <%#Eval("SHORT_ARTICLE_TITLE") %></div>
                            <div class="image-desc">
                                <%#Eval("SHORT_ARTICLE_DESCRIPTION") %></div>
                        </div>
                    </li>
                </ItemTemplate>
            </asp:Repeater>
        </ul>
    </div>
</div>
